<template>
  <el-pagination
    class="pagenation"
    popper-class="uk_pagination-popper"
    @size-change="handleSizeChange(currentPage, pageSize)"
    @current-change="currentChange(currentPage, pageSize)"
    v-model:current-page="moduleCurrentPage"
    :page-sizes="[5, 10, 15, 20, 30, 100,1000]"
    v-model:page-size="modulePageSize"
    layout="prev, pager, next,sizes"
    :total="total"
  >
  </el-pagination>
</template>

<script setup lang="ts">
const props = defineProps({
  currentPage: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  total: {
    type: Number,
    default: 10,
  },
  unshowpage: {
    type: Number,
    default: 1,
  },
});

const emit = defineEmits([
  "update:currentPage",
  "update:pageSize",
  "handleSizeChange",
  "currentChange",
]);

const handleSizeChange = (currentPage: number, pageSize: number) => {
  emit("currentChange", currentPage, pageSize);
};

const currentChange = (currentPage: number, pageSize: number) => {
  emit("handleSizeChange", currentPage, pageSize);
};

const moduleCurrentPage = ref(1);
const modulePageSize = ref(10);
const moduleTotal = ref(10);
onMounted(()=>{
  console.log("unshowpage", props.unshowpage);
  moduleCurrentPage.value= props.unshowpage
})
watch(
  () => props.unshowpage,
  (newValue, oldValue) => {
    console.log("unshowpage", newValue);
    console.log("unshowpage-od", oldValue);

    moduleCurrentPage.value = newValue;
  }
);


watch(
  () => props.pageSize,
  (newValue, oldValue) => {
    console.log("newValue", newValue);
    console.log("oldValue", oldValue);

    modulePageSize.value = newValue;
  }
);

watch(
  () => props.total,
  (newValue, oldValue) => {
    console.log("newValue", newValue);
    console.log("oldValue", oldValue);

    moduleTotal.value = newValue;
  }
);
</script>

<style scoped lang="scss">
.pagenation {
  float: right;
  margin-right: 10px;
  background-color: #fff;
}
</style>
